<template>
  <div class="jifenmingxi" v-loading="loading">
    <el-button type="primary" plain class="btn" @click="back">返回</el-button>
    <div style="margin-top: 10px;">
      <el-form :inline="true" :model="forms" class="demo-form-inline">
        <el-form-item label="虞豆类型">
          <el-select v-model="forms.msgType" placeholder="请选择" clearable>
            <el-option v-for="(item,key) in commonMaps.jifenTypeMap" :key="key" :label="item.label" :value="key">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间" prop="timer">
          <el-date-picker clearable size="small" v-model="timer" type="daterange" value-format="yyyy-MM-dd" align="right" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="searchList">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="searchList()">查询</el-button>
          <el-button type="info" size="small" plain @click="chongzhi">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table :data="list" style="width: 100%">
        <el-table-column prop="id" label="编号" width="100" align="center">
        </el-table-column>
        <el-table-column prop="msg" label="详情">
        </el-table-column>
        <!--  -->
        <!-- <el-table-column prop="saleName" label="推送" >
          </el-table-column> -->
        <el-table-column prop="createName" label="操作人">
          <template slot-scope="scope">
            <div>
              {{scope.row.createName||'系统'}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="campNumber" label="虞豆变动">
          <template slot-scope="scope">
            <div :style="{color:scope.row.campNumber>0?'green':'red'}">
              {{scope.row.campNumber>0?'+'+scope.row.campNumber:scope.row.campNumber}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="lastNumber" label="变动后虞豆">
        </el-table-column>
        <!-- lastNumber -->
        <el-table-column prop="createTime" label="创建时间">
        </el-table-column>
      </el-table>
    </div>
    <div style="text-align: right; margin-top: 20px">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="this.forms.pageNum" :page-sizes="[10, 20, 30, 50]" :page-size="this.forms.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { RecordQuery } from "@/api/shangcheng";
export default {
  data() {
    return {
      loading: false,
      forms: {
        pageSize: 10,
        pageNum: 1,
        createName: null,
        type: 3,
      },
      list: [],
      total: 0,
      timer: [],
    };
  },
  created() {
    this.getMessage();
  },
  methods: {
    // 返回
    back() {
      window.history.go(-1);
    },
    async getMessage() {
      if (this.timer && this.timer.length == 2) {
        this.forms.startTime = this.timer[0] + " 00:00:00";
        this.forms.endTime = this.timer[1] + " 23:59:59";
      } else {
        this.forms.startTime = "";
        this.forms.endTime = "";
      }
      this.loading = true;
      const res = await RecordQuery(this.forms);
      this.loading = false;
      this.list = res.rows;
      this.total = res.total;
    },
    //分页
    handleSizeChange(val) {
      this.forms.pageSize = val;
      this.getMessage();
    },
    handleCurrentChange(val) {
      this.forms.pageNum = val;
      this.getMessage();
    },
    searchList() {
      this.forms.pageNum = 1;
      this.getMessage();
    },
    chongzhi() {
      this.forms = {
        pageSize: 10,
        pageNum: 1,
        createName: null,
        type: 3,
      };
      this.timer = [];
      this.getMessage();
    },
  },
};
</script>

<style lang="scss" scoped>
.jifenmingxi {
  margin-top: 16px;
}
</style>